<template>
  <div class="home" v-loading="dataListLoading" element-loading-text="加载中">
    <el-row v-if="hotel.id" class="f-row" style="height: 200px; border: 1px solid #ccc;box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);">
      <el-col :span="12" style="height: 100%;">
        <el-col :span="8" style="height: 100%;line-height: 200px;;text-align:center;">
          <el-avatar :size="110" style="line-height: 200px;vertical-align: middle;" :src="hotel.ewmLogo"></el-avatar>
        </el-col>
        <el-col :span="8" style="height: 100%;line-height: 200px;;text-align:center;">
          <el-row class="f-row" style="line-height: 200px;padding:50px 0;">
            <el-row class="f-row" style="line-height: 32px;text-align: left;">{{ hotel.name }}</el-row>
            <el-row class="f-row" style="line-height: 32px;text-align: left;">账号：{{ userName }}</el-row>
            <el-row class="f-row" style="line-height: 32px;text-align: left;">有效期至：2028年1月1日{{  }}</el-row>
          </el-row>
          
        </el-col>
        <el-col :span="8" style="height: 100%;line-height: 200px;;text-align:center;">
        </el-col>
      </el-col>
    </el-row>
    <!-- 快捷入口 start -->
    <el-row class="f-row">
      <el-row class="header" style="">
        <el-col :span="3" style="" class="tit custom-label">快捷入口</el-col>
        <el-col :span="21" class="header-content-btn">
          <el-button class="custom-btn" type="primary" size="small">会员列表
            <i style="color:red;font-size:20px;" class="el-icon-remove-outline icon-top-right"></i>
          </el-button>
          <el-button class="custom-btn" type="primary" size="small">测试按钮1
            <i style="color:red;font-size:20px;" class="el-icon-remove-outline icon-top-right"></i>
          </el-button>
          <el-button class="custom-btn" type="primary" size="small">测试按钮2
            <i style="color:red;font-size:20px;" class="el-icon-remove-outline icon-top-right"></i>
          </el-button>
          <el-button class="custom-btn" type="primary" size="small">测试按钮3
            <i style="color:red;font-size:20px;" class="el-icon-remove-outline icon-top-right"></i>
          </el-button>
        </el-col>
      </el-row>
    </el-row>
    <!-- 快捷入口 end -->
    <!-- 异动提醒 start -->
    <el-row class="f-row" style="padding-right: 150px;">
      <el-row class="header" style="">
        <el-col :span="3" style="" class="tit custom-label">异动提醒</el-col>
        <el-col :span="21" class="header-content-card">
          <div class="custom-statistic-container">
            <span class="custom-value">123<span class="custom-unit">笔</span></span>
            <span class="custom-title">冲账</span>
          </div>
          <div class="custom-statistic-container">
            <span class="custom-value">123<span class="custom-unit">笔</span></span>
            <span class="custom-title">改价</span>
          </div>
          <div class="custom-statistic-container">
            <span class="custom-value">123<span class="custom-unit">笔</span></span>
            <span class="custom-title">撤销结账</span>
          </div>
          <div class="custom-statistic-container">
            <span class="custom-value">123<span class="custom-unit">笔</span></span>
            <span class="custom-title">优惠</span>
          </div>
          <div class="custom-statistic-container">
            <span class="custom-value">123<span class="custom-unit">笔</span></span>
            <span class="custom-title">撤销入住</span>
          </div>
          <div class="custom-statistic-container">
            <span class="custom-value">123<span class="custom-unit">笔</span></span>
            <span class="custom-title">优惠券</span>
          </div>
          <div class="custom-statistic-container">
            <span class="custom-value">123<span class="custom-unit">笔</span></span>
            <span class="custom-title">免费房</span>
          </div>
          <div class="custom-statistic-container">
            <span class="custom-value">123<span class="custom-unit">笔</span></span>
            <span class="custom-title">自用房</span>
          </div>
          <div class="custom-statistic-container">
            <span class="custom-value">123<span class="custom-unit">笔</span></span>
            <span class="custom-title">押账离店</span>
          </div>
          <div class="custom-statistic-container">
            <span class="custom-value-zero">0<span class="custom-unit">笔</span></span>
            <span class="custom-title">欠费</span>
          </div>
        </el-col>
      </el-row>
    </el-row>
    <!-- 异动提醒 end -->
    <!-- 数据概览 start -->
    <el-row class="f-row">
      <el-row class="header" style="">
        <el-col :span="3" style="" class="tit custom-label">数据概览</el-col>
        <el-col :span="21" class="header-content">
          <el-row>
            <el-radio-group v-model="queryTimeTab" >
              <el-radio-button label="day">今日</el-radio-button>
              <el-radio-button label="week">近7天</el-radio-button>
              <el-radio-button label="month">近30天</el-radio-button>
              <el-radio-button label="year">近一年</el-radio-button>
            </el-radio-group>
          </el-row>
          
        </el-col>
      </el-row>
      <el-row class="body">
        <el-col :span="21" :offset="3" class="body-content">
          <el-row class="body-content-cards">
            <div class="body-content-card-item" >
              <i class="iconfont icon-attachmoney card-title-icon" style="color : rgb(255, 87, 51);"></i>
              <span class="card-title-text">总收款（元）</span>
              <a class="card-more">收支报表<i class="el-icon-arrow-right "></i></a>
              <span class="card-today">￥{{ data.totalAmount || 323342.23 }}</span>
              <span class="card-today-change-up">+92.5%<i class="el-icon-top"></i></span>
              <span class="card-yesterday">昨日（元）：￥{{ data.yesterdayAmount || 532345.00 }}</span>
            </div>
            <div class="body-content-card-item" >
              <i class="iconfont icon-monetization_on card-title-icon" style="color : rgb(255, 141, 26);"></i>
              <span class="card-title-text">总营业收入（元）</span>
              <a class="card-more">营业分析报表<i class="el-icon-arrow-right "></i></a>
              <span class="card-today">￥{{ data.totalAmount || 323342.23 }}</span>
              <span class="card-today-change-up">+92.5%<i class="el-icon-top"></i></span>
              <span class="card-yesterday">昨日（元）：￥{{ data.yesterdayAmount || 532345.00 }}</span>
            </div>
            <div class="body-content-card-item" >
              <i class="iconfont icon-eventnote card-title-icon" style="color : rgb(0, 186, 173);"></i>
              <span class="card-title-text">间夜数</span>
              <a class="card-more">详情<i class="el-icon-arrow-right "></i></a>
              <span class="card-today">{{ data.totalAmount || 75 }}间</span>
              <span class="card-today-change-down">-92.5%<i class="el-icon-bottom"></i></span>
              <span class="card-yesterday">昨日（元）：￥{{ data.yesterdayAmount || 532345.00 }}</span>
            </div>
            
          </el-row>
          <el-row class="body-content-cards">
            <div class="body-content-card-item" >
              <i class="iconfont icon-timeline card-title-icon" style="color : rgb(121, 72, 234);"></i>
              <span class="card-title-text">平均房价（元）</span>
              <a class="card-more">历史平均房价<i class="el-icon-arrow-right "></i></a>
              <span class="card-today">￥{{ data.totalAmount || 323342.23 }}</span>
              <span class="card-today-change-down">-92.5%<i class="el-icon-bottom"></i></span>
              <span class="card-yesterday">昨日（元）：￥{{ data.yesterdayAmount || 532345.00 }}</span>
            </div>
            <div class="body-content-card-item" >
              <i class="iconfont icon-insertdrivefile  card-title-icon" style="color : rgb(42, 130, 228);"></i>
              <span class="card-title-text">RevPer</span>
              <a class="card-more">历史平均房价<i class="el-icon-arrow-right "></i></a>
              <span class="card-today">￥{{ data.totalAmount || 198.23 }}</span>
              <span class="card-today-change-down">-12.3%<i class="el-icon-bottom"></i></span>
              <span class="card-yesterday">昨日（元）：￥{{ data.yesterdayAmount || 231.00 }}</span>
            </div>
            <div class="body-content-card-item" >
              <i class="iconfont icon-ic_percentage card-title-icon" style="color: rgb(255, 87, 51);"></i>
              <span class="card-title-text">入住率</span>
              <a class="card-more">入住详情<i class="el-icon-arrow-right "></i></a>
              <span class="card-today">{{ data.totalAmount || 67.8 }}%</span>
              <span class="card-today-change-up">+92.5%<i class="el-icon-top"></i></span>
              <span class="card-yesterday">昨日（元）：{{ data.yesterdayAmount || 32.00 }}%</span>
            </div>
          </el-row>
        </el-col>
      </el-row>

      <el-row class="header"  style="padding-right: 150px;">
        <el-col :span="21" :offset="3" class="header-content">
          <el-row class="el-col-24">
            <el-col class="custom-label" style="font-size: 20px;line-height: 35px;" :span="3">营业收入一览</el-col>
            <el-col :span="10">
              <el-radio-group v-model="queryTimeTab" style="font-size: 18px;">
                <el-radio-button label="day">今日</el-radio-button>
                <el-radio-button label="week">近7天</el-radio-button>
                <el-radio-button label="month">近30天</el-radio-button>
                <el-radio-button label="year">近一年</el-radio-button>
              </el-radio-group>
            </el-col>
          </el-row>
          
        </el-col>
      </el-row>
      <el-row class="body">
        <el-col :span="19" :offset="3" class="body-content">
          <el-card>
          <div id="roomIncomeChartLineBox" class="chart-box"></div>
          </el-card>
        </el-col>
      </el-row>


      <el-row class="header"  style="padding-right: 150px;">
        <el-col :span="21" :offset="3" class="header-content">
          <el-row class="el-col-24">
            <el-col class="custom-label" style="font-size: 20px;line-height: 35px;" :span="3">间夜数一览-房间</el-col>
            <el-col :span="10">
              <el-radio-group v-model="queryTimeTab" style="font-size: 18px;">
                <el-radio-button label="day">今日</el-radio-button>
                <el-radio-button label="week">近7天</el-radio-button>
                <el-radio-button label="month">近30天</el-radio-button>
                <el-radio-button label="year">近一年</el-radio-button>
              </el-radio-group>
            </el-col>
          </el-row>
          
        </el-col>
      </el-row>
      <el-row class="body">
        <el-col :span="19" :offset="3" class="body-content">
          <el-card>
          <div id="roomNightsChartBarBox" class="chart-box"></div>
          </el-card>
        </el-col>
      </el-row>


      <el-row class="header"  style="padding-right: 150px;">
        <el-col :span="21" :offset="3" class="header-content">
          <el-row class="el-col-24">
            <el-col class="custom-label" style="font-size: 20px;line-height: 35px;" :span="3">间夜数一览-房型</el-col>
            <el-col :span="10">
              <el-radio-group v-model="queryTimeTab" style="font-size: 18px;">
                <el-radio-button label="day">今日</el-radio-button>
                <el-radio-button label="week">近7天</el-radio-button>
                <el-radio-button label="month">近30天</el-radio-button>
                <el-radio-button label="year">近一年</el-radio-button>
              </el-radio-group>
            </el-col>
          </el-row>
          
        </el-col>
      </el-row>
      <el-row class="body">
        <el-col :span="19" :offset="3" class="body-content">
          <el-card class="el-col-12">
          <div id="roomNightsTypeChartPieBox" class="chart-box"></div>
          </el-card>
          <el-card  class="el-col-12">
          <div id="roomNightsTypeChartBarBox" class="chart-box"></div>
          </el-card>
        </el-col>
      </el-row>
      
    </el-row>
    <!-- 数据概览 end -->
    <!-- 在住概览 start -->
    <el-row class="f-row" style="padding-right: 150px;">
      <el-row class="header" style="justify-content: flex-start;">
        <el-col :span="3" style="" class="tit custom-label">在住概览</el-col>
      </el-row>
      <el-row class="body">
        <el-col :span="21" :offset="3" class="body-content-statistic">
          <div class="custom-statistic-container">
            <span class="custom-value">￥235653.00<span class="custom-unit"></span></span>
            <span class="custom-title">总收款（元）</span>
          </div>
          <div class="custom-statistic-container">
            <span class="custom-value">￥2356.00<span class="custom-unit"></span></span>
            <span class="custom-title">在住押金（元）</span>
          </div>
          <div class="custom-statistic-container">
            <span class="custom-value">75<span class="custom-unit">间</span></span>
            <span class="custom-title">在住间数</span>
          </div>
          <div class="custom-statistic-container">
            <span class="custom-value">15<span class="custom-unit">间</span></span>
            <span class="custom-title">空置间数</span>
          </div>
          <div class="custom-statistic-container">
            <span style="color:orange;" class="custom-value">34<span class="custom-unit">间</span></span>
            <span class="custom-title">今日预离</span>
          </div>
          <div class="custom-statistic-container">
            <span class="custom-value">23<span class="custom-unit">间</span></span>
            <span class="custom-title">今日预抵</span>
          </div>
        </el-col>
      </el-row>
    </el-row>
    <!-- 在住概览 end -->
    <!-- 实时房态 start -->
    <el-row class="f-row" style="padding-right: 150px;">
      <el-row class="header" style="justify-content: flex-start;">
        <el-col :span="3" style="" class="tit custom-label">实时房态</el-col>
      </el-row>
      <el-row class="body">
        <el-col :span="21" :offset="3" class="body-content-table">
          <el-table
            ref="multipleTable"
            border
            show-summary
            :summary-method="getSummaries"
            :header-cell-style="headerCellStyle"
            :data="roomStateList"
            tooltip-effect="dark"
            style="width: 100%;font-size: 18px;"
          >
            <el-table-column prop="type" label="房型" width="120"></el-table-column>
            <el-table-column align="center" prop="total" label="间数（间）" width="120"></el-table-column>
            <el-table-column align="center" prop="live" label="在住"></el-table-column>
            <el-table-column :render-header="renderHeader" :columns="mergedColumns" width="240">
              <el-table-column align="center" prop="clean" label="空净" width="120"></el-table-column>
              <el-table-column align="center" prop="dirty" label="空脏" width="120"></el-table-column>
            </el-table-column>
            <el-table-column align="center" prop="preDeparture" label="预离"></el-table-column>
            <el-table-column align="center" prop="preArrival" label="预抵"></el-table-column>
            <el-table-column align="center" prop="available" label="今日可住"></el-table-column>
          </el-table>
        </el-col>
      </el-row>
    </el-row>
    <!-- 实时房态 end -->
  </div>
</template>
<script>
import moment from "moment";
import echarts from 'echarts'
export default {
  data() {
    return {
      dataForm: {
        dates: [
          moment().format("YYYY-MM-DD"),
          moment()
            .add(1, "days")
            .format("YYYY-MM-DD")
        ]
      },
      roomStateList:[
        {type:'商务大床房',total:20,live:10,clean:10,dirty:4,preDeparture:3,preArrival:2,available:3},
        {type:'高级大床房',total:20,live:10,clean:10,dirty:4,preDeparture:3,preArrival:2,available:3},
        {type:'零压高级大床房',total:20,live:10,clean:10,dirty:4,preDeparture:3,preArrival:2,available:3},
        {type:'高级标准间',total:20,live:10,clean:10,dirty:4,preDeparture:3,preArrival:2,available:3},
        {type:'商务标间',total:20,live:10,clean:10,dirty:4,preDeparture:3,preArrival:2,available:3},
        {type:'豪华商务单间',total:20,live:10,clean:10,dirty:4,preDeparture:3,preArrival:2,available:3}
      ],
      mergedColumns: [
        { prop: 'clean', label: '空净' },
        { prop: 'dirty', label: '空脏' }
      ],
      queryTimeTab: "day",
      hotel:{},
      data: {
        hotelCreateNum: 0,
        hotelTotal: 0,
        invalidOrderNum: 0,
        marketingAmount: 0,
        refundAmount: 0,
        validOrderNum: 0,
        statisticsApply: {
          applyNum: 0,
          passNum: 0,
          refuseNum: 0,
          total: 0
        },
        statisticsMember: {
          monthNum: 0,
          todayNum: 0,
          total: 0,
          yesterdayNum: 0
        },
        statisticsOrder: {
          cancelNum: 0,
          checkInNum: 0,
          completeNum: 0,
          refundNum: 0,
          total: 0
        }
      },
      dataListLoading: false
    };
  },
  name: "home",
  props: {},
  computed: {
    userName: {
      get() {
        return this.$store.state.user.name;
      }
    }
  },
  activated() {
    this.getData();
  },
  mounted() {
    this.getCurrentHotel();
    this.initRoomIncomeChartLine();
    this.initRoomNightsChartBar();
    this.initRoomNightsTypeChartPie();
    this.initRoomNightsTypeChartBar();
  },
  methods: {
    getData() {
      this.dataListLoading = true;
      this.$http({
        url: this.$http.adornUrl("/hotel/statistics/platfrom"),
        method: "post",
        data: this.$http.adornData({
          dates: this.dataForm.dates
        })
      }).then(({ data }) => {
        if (data && data.code === 0) {
          this.data = data.data;
          console.log(this.data);
        } else {
        }
        this.dataListLoading = false;
      });
    },
    getCurrentHotel() {
      this.$http({
        url: this.$http.adornUrl("/sys/user/currentSeller"),
        method: "get",
        data: {}
      }).then(({ data }) => {
        if (data && data.code === 0) {
          this.hotel = data.data;
          console.log('hotel',this.hotel);
        } else {
        }
      });
    },
    renderHeader(h, { column }) {
      return h('div', [
        h('span', { style: { display: 'block', 'text-align': 'center' } }, '空房'),
        // h('div', { style: { display: 'flex' } }, this.mergedColumns.map(col => {
        //   return h('div', { style: { flex: 1, 'text-align': 'center' } }, col.label);
        // }))
      ]);
    },
    getSummaries(param) {
      const { columns, data } = param;
      const sums = [];
      columns.forEach((column, index) => {
        if (index === 0) {
          sums[index] = '合计';
          return;
        }
        const values = data.map(item => Number(item[column.property]));
        if (!values.every(value => isNaN(value))) {
          sums[index] = values.reduce((prev, curr) => {
            const value = Number(curr);
            if (!isNaN(value)) {
              return prev + curr;
            } else {
              return prev;
            }
          }, 0);
          sums[index] += ' ';
        } else {
          sums[index] = '';
        }
      });
      return sums;
    },
    headerCellStyle({column, rowIndex}) {
      if (column.label === '今日可住') {
        return {
          backgroundColor: 'orange',
          color: 'white',
          fontWeight: 'bold',
          textAlign: 'center'
        };
      }
      return {
        backgroundColor: '#1890FF',
        color: 'white',
        fontWeight: 'bold',
        textAlign: 'center'
      };
    },
    // 折线图
    initRoomIncomeChartLine () {
        var option = {
          'title': {
            'text': ''
          },
          'tooltip': {
            'trigger': 'axis'
          },
          'legend': {
            'data': [ '营业收入']
          },
          'grid': {
            'left': '3%',
            'right': '4%',
            'bottom': '3%',
            'containLabel': true
          },
          'toolbox': {
            'feature': {
              'saveAsImage': { }
            }
          },
          'xAxis': {
            'type': 'category',
            'boundaryGap': false,
            'data': [ '0901', '0902', '0903', '0904', '0905', '0906', '0907','0908','0909','0910','0911' ]
          },
          'yAxis': {
            'type': 'value'
          },
          'series': [
            {
              'name': '营业收入',
              'type': 'line',
              'stack': '总量',
              'data': [ 120, 1320, 101, 134, 90, 230, 210,0,300,200,600 ],
              'itemStyle': {
                'normal': {
                  'color': '#1890FF', // 线条颜色
                  'lineStyle': {
                      'color': '#1890FF' // 设置线条颜色
                  }
                }
              }
            }
          ],
          
        }
        this.chartLine = echarts.init(document.getElementById('roomIncomeChartLineBox'))
        this.chartLine.setOption(option)
        window.addEventListener('resize', () => {
          this.chartLine.resize()
        })
      },
      initRoomNightsChartBar () {
        var option = {
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'shadow'
            }
          },
          legend: {
            data: ['间夜数']
          },
          grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
          },
          xAxis: [
            {
              type: 'category',
              data: ['0901', '0902', '0903', '0904', '0905', '0906', '0907']
            }
          ],
          yAxis: [
            {
              type: 'value'
            }
          ],
          series: [
            {
              name: '间夜数',
              type: 'bar',
              data: [320, 332, 301, 334, 390, 330, 320],
              itemStyle: {
                color: '#1890FF',
                normal: {
                  color: '#1890FF', // 填充颜色
                }
              }
            }
          ]
        }
        this.chartBar = echarts.init(document.getElementById('roomNightsChartBarBox'))
        this.chartBar.setOption(option)
        window.addEventListener('resize', () => {
          this.chartBar.resize()
        })
      },
      initRoomNightsTypeChartPie () {
        var option = {
          color:['#5470c6', '#91cc75', '#fac858', '#ee6666', '#73c0de', '#3ba272', '#fc8452', '#9a60b4', '#ea7ccc'],
          tooltip: {
            trigger: 'item'
          },
          legend: {
            top: '5%',
            left: 'center'
          },
          series: [
            {
              name: '',
              type: 'pie',
              radius: ['40%', '70%'],
              avoidLabelOverlap: false,
              label: {
                show: true,
                position: 'center'
              },
              emphasis: {
                label: {
                  show: true,
                  fontSize: 40,
                  fontWeight: 'bold'
                }
              },
              labelLine: {
                show: false
              },
              data: [
                { value: 1048, name: '高级大床房' },
                { value: 735, name: '商务大床房' },
                { value: 580, name: '商务标间' },
                { value: 484, name: '豪华单人间' },
                { value: 300, name: '豪华总统套房' },
                { value: 300, name: '棋牌房' }
              ]
            }
          ]
        };
        this.chartPie = echarts.init(document.getElementById('roomNightsTypeChartPieBox'))
        this.chartPie.setOption(option)
        window.addEventListener('resize', () => {
          this.chartPie.resize()
        })
      },
      initRoomNightsTypeChartBar () {
        var option = {
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'shadow'
            }
          },
          legend: {
            data: ['间夜数']
          },
          grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
          },
          xAxis: [
            {
              type: 'category',
              data: ['高级大床房', '商务大床房', '商务标间', '豪华单人间', '豪华总统套房', '棋牌房']
            }
          ],
          yAxis: [
            {
              type: 'value'
            }
          ],
          series: [
            {
              name: '间夜数',
              type: 'bar',
              data: [320, 332, 301, 334, 390, 330, 320],
              itemStyle: {
                color: '#1890FF',
                normal: {
                  color: '#1890FF', // 填充颜色
                }
              }
            }
          ]
        }
        this.chartBar = echarts.init(document.getElementById('roomNightsTypeChartBarBox'))
        this.chartBar.setOption(option)
        window.addEventListener('resize', () => {
          this.chartBar.resize()
        })
      }
  }
};
</script>
<style lang="scss">
.site-content {
  > .el-card {
    background: transparent;
    > .el-card__body {
      padding: 0;
    }
  }
}
.home {
  .chart-box {
    min-height: 280px;
  }
  .quick-menu {
    margin-top: 30px;
    .grid-content {
      padding: 50px 0px;
      border: 1px solid #eee;
      text-align: center;
      img {
        margin-bottom: 10px;
      }
    }
  }
  .box-card {
    margin-top: 20px;
    padding: 10px;
    .order-card {
      min-height: 200px;
      padding: 80px 0 30px 0;
      span {
        display: block;
        text-align: center;
        padding: 10px 0;
      }
    }
  }
  .custom-btn {
    position: relative;
  }
  .icon-top-right {
    position: absolute;
    top: 0;
    right: 0;
    transform: translate(50%, -50%);
  }
  .header {
    font-size: 20px;
    padding: 16px 20px;
    background-color: #fff;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    .header-content {
      display: flex;
      font-size: 12px;
    }
    .header-content-card {
      padding: 30px 18px;
      border: 1px solid #ccc;
      border-radius: 10px;
      box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
      display: flex;
      font-size: 12px;
      flex-wrap: wrap; /* 允许换行 */
      justify-content: space-between; /* 子元素均匀分布 */
      gap: 10px;
      .custom-statistic-container {
        padding: 10px;
        display: flex;
        font-size: 16px;
        flex-direction: column; /* 调换文字和数字的位置 */
        align-items: center;
        .custom-title {
          margin-top: 10px;
          font-size: 18px;
          color: #333;
          margin-bottom: 10px;
        }
        .custom-value {
          font-size: 24px;
          color: #ff6600;
          font-weight: bold;
          .custom-unit{
            color:#333;
            font-size: 18px;
            font-weight: normal;
            padding-left:2px ;
          }
        }
        .custom-value-zero {
          font-size: 24px;
          color: blue;
          font-weight: bold;
          .custom-unit{
            color:#333;
            font-size: 18px;
            font-weight: normal;
            padding-left:2px ;
          }
        }
      }
    }
    .header-content-btn {
      display: flex;
      flex-wrap: wrap; /* 允许换行 */
      gap: 10px;
    }
    &-ab {
      &::before {
        content: "";
        position: absolute;
        width: 3px;
        height: 1.2em;
        top: 50%;
        transform: translateY(-50%);
        background: lightskyblue;
      }
    }
    .tit {
      padding-left: 10px;
      font-size: 24px;
    }
    &-bd {
      padding: 16px 10px;
      &::after {
        content: "";
        position: absolute;
        width: 96%;
        height: 1px;
        left: 50%;
        top: 100%;
        transform: translateX(-50%);
        background: #eeeeee;
      }
    }
  }
  .body{
    font-size: 16px;
    padding: 16px 20px;
    background-color: #fff;
    .body-content-cards{
      display: flex;
      flex-wrap: wrap;
      // justify-content: space-between;
      // gap: 40px;
      .body-content-card-item{
        position: relative;
        margin: 10px 0;
        padding: 20px;
        margin-right: 10px;
        border-top-left-radius: 6px;
        border-top-right-radius: 6px;
        border-bottom-right-radius: 6px;
        border-bottom-left-radius: 6px;
        width: 358px;
        height: 224px;
        left: 0px;
        top: 0px;
        background-color: rgb(255, 255, 255);
        box-shadow: rgba(0, 0, 0, 0.5) 0px 6px 6px 1px;
        .card-title-icon {
          position: absolute;
          font-size : 50px;
          top: 10px;
          left: 22px;
        }
        .card-title-text {
          position: absolute;
          font-size : 18px;
          top: 30px;
          left: 72px;
          font-weight: bold;
        }
        .card-more {
          font-size : 14px;
          color : rgb(42, 130, 228);
          position: absolute;
          top: 20px;
          right: 20px;
        }
        .card-today{
          position: absolute;
          top: 84px;
          left: 60px;
          font-size : 32px;
          font-weight: bold;
        }
        .card-today-change-down{
          position: absolute;
          top: 95px;
          right: 30px;
          font-size : 18px;
          color : rgb(0, 186, 173);
        }
        .card-today-change-up{
          position: absolute;
          top: 95px;
          right: 30px;
          color : rgb(255, 87, 51);
        }
        .card-yesterday{
          position: absolute;
          bottom: 56px;
          left: 60px;
          font-size : 18px;
        }

      }
    }
    .body-content-statistic {
      padding: 30px 18px;
      border-radius: 10px;
      display: flex;
      font-size: 12px;
      flex-wrap: wrap; /* 允许换行 */
      justify-content: space-between; /* 子元素均匀分布 */
      gap: 10px;
      .custom-statistic-container {
        padding: 10px;
        display: flex;
        font-size: 16px;
        flex-direction: column; /* 调换文字和数字的位置 */
        align-items: center;
        .custom-title {
          margin-top: 56px;
          font-size: 19px;
          color: #333;
          margin-bottom: 10px;
        }
        .custom-value {
          font-size: 27px;
          color: #000;
          font-weight: bold;
          .custom-unit{
            color:#000;
            font-size: 27px;
            font-weight: normal;
            padding-left:2px ;
          }
        }
        .custom-value-zero {
          font-size: 24px;
          color: #000;
          font-weight: bold;
          .custom-unit{
            color:#000;
            font-size: 24px;
            font-weight: normal;
            padding-left:2px ;
          }
        }
      }
    }
    .body-content-table {

    }

  }
  .md {
    .grid-content {
      color: #999999;
      padding: 20px 0;
      border-radius: 5px;
      background-color: #fff;
    }
    padding: 10px;
    box-sizing: border-box;
    span {
      display: block;
      padding: 5px 0;
      text-align: center;
    }
    .holder {
      height: 10px;
      margin-top: 10px;
      border-bottom: 1px solid #eeeeee;
      box-sizing: border-box;
      &-bt {
        border-top: 1px solid #eeeeee;
      }
    }
    .box-1 {
      margin-top: 20px;
      box-sizing: border-box;
      &-l {
        border-right: 1px solid #eeeeee;
      }
    }
  }
  .holder-bd {
    width: 50%;
    margin: 0 auto;
    box-sizing: border-box;
    border-bottom: 1px solid #d9d9d9;
  }
  .img-item-box {
    text-align: center;
    img {
      width: 55px;
      height: 55px;
    }
  }
  .flex-item-r {
    .grid-content {
      color: #999999;
      padding: 20px 0;
      border-radius: 5px;
      background-color: #fff;
      &-pd {
        padding: 20px;
      }
      &-lg {
        padding: 40px;
        .img-item-box {
          text-align: center;
        }
      }
    }
    padding: 10px 0;
    span {
      display: block;
      padding: 5px 0;
      text-align: center;
    }
    &-2 {
      padding-top: 20px;
      span {
        display: block;
        padding: 10px 0;
        text-align: center;
      }
    }
  }
  .f-row {
    .md {
      .grid-content {
        color: #999999;
        padding: 20px 0;
        border-radius: 5px;
        border: 1px solid #eeeeee;
        background-color: #fff;
      }
      padding: 10px;
      box-sizing: border-box;
      background-color: #fff;
      span {
        display: block;
        padding: 5px 0;
        text-align: center;
      }
      &-1 {
        padding-left: 20px;
      }
      &:last-child {
        padding-right: 20px;
      }
    }
  }
  .box-2 {
    padding: 30px 0;
    box-sizing: border-box;

    &-g {
      background-color: #f2f2f2;
    }
  }
  span.flex-span {
    display: flex;
    justify-content: space-around;
    align-items: center;
  }
  .avatar {
    display: inline-block;
    width: 24px;
    height: 24px;
  }
  
}






</style>